<template>
    <!-- 人员管理-智能安全帽-电子围栏 -->
    <div class="empFence">
        <div class="left">
            <div class="ipt">
                <Input search enter-button placeholder="请输入关键字"  style="width:200px"  @on-search="searchAll" v-model="keyword" clearable />
            </div>
            <div class="ipt" style="border-bottom :none; height:50px;">
                <el-button size="small" plain @click="updateRow(0)" type="primary" :disabled="!btnList.includes('emp/fence/add')">新增电子围栏</el-button>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="getDetails(item)" :class="fenceId == item.id?'active':''" @mouseover="over(item,index)" @mouseleave="leave(item,index)">
                    <span>{{item.name}}</span>
                    <div v-if="showId == index">
                        <i class="el-icon-edit-outline" @click="updateRow(1, index, item)"></i>
                        <i class="el-icon-delete" @click="remove(index, item)"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right">
            <div id="container" v-if="changeMap" style="width:100%;height:100%"></div>
            <div v-if="!changeMap">
                <div class="top">
                    <div class="search">
                        <div class="list">
                            <Select v-model="groupId" style="width:200px" placeholder="班组:全部" @on-change="getGroupType">
                                <Option v-for="(item,index) in groupList" :value="item.groupId" :key="index">{{item.groupName}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="list">
                            <Select v-model="workId" style="width:200px" placeholder="工种:全部" @on-change="getWorkType">
                                <Option v-for="item in workList" :value="item.workTypeId" :key="item.workTypeId">{{item.workTypeName}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="list">
                            <Input search enter-button placeholder="人员姓名搜索"  style="width:250px"  @on-search="onSearch" @on-enter="onSearch" v-model="empKeyword" clearable />
                        </div>

                    </div>
                    <div class="down" style="margin-right:2%;display:flex">
                        <el-button :type="list.length == 0 ?'info':'primary'" @click="changeMap=true,getIndexMapEmpPolyFn()" size="small" plain :disabled="list.length == 0">查看地图</el-button>
                        <el-button :type="list.length == 0 ?'info':'primary'" @click="updateEmp" size="small" plain :disabled="list.length == 0">添加考勤人员</el-button>
                    </div>
                </div>
                <div class="bottom">
                    <div class="table">
                        <el-table :data="empList" :height="tableHeight" :stripe='true'>
                            <el-table-column label="头像">
                                <template slot-scope="scope">
                                    <div class="demo-image__preview">
                                        <el-image :src="scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar" style="display:block;width:45px;height:45px;border-radius:50%" :preview-src-list="[scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar]" ></el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号"></el-table-column>
                            <el-table-column prop="groupName" label="班组"></el-table-column>
                            <el-table-column prop="workName" label="工种"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button style="color:red" @click.native.prevent="removeRow(scope.$index, empList)" :disabled="!btnList.includes('emp/fence/delete')" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="clearfix" v-show="empList.length > 0">
                        <div class="float-right">
                            <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="updateEmpModal" title="添加考勤人员" width="1000px;" :mask-closable="false">
            <div class="search1">
                <div class="list1">
                    <!-- <span>关键字搜索:</span> -->
                     <Input search enter-button placeholder="人员姓名搜索"  style="width:250px"  @on-search="onUpdateSearch" @on-enter="onUpdateSearch" v-model="updateKeyword" clearable />
                    <!-- <Input v-model="updateKeyword" placeholder="请输入关键字搜索" style="width:200px" /> -->
                </div>
                <div class="list1">
                    <Select v-model="groupEmpId" style="width:200px" placeholder="班组:全部" @on-change="getUpdateGroupType">
                        <Option v-for="(item,index) in groupList" :value="item.groupId" :key="index">{{item.groupName}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <div class="table" style="width:98%;margin:20px auto;">
                <el-table :data="updateList" style="width: 100%"  @select="emplistSelectOne" @select-all="emplistSelectALL" height="500px" :stripe='true'>
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar" style="display:block;width:45px;height:45px;border-radius:50%" :preview-src-list="[scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar]" ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="phone" label="手机号"></el-table-column>
                    <el-table-column prop="groupName" label="班组"></el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="updateList.length > 0">
                <div class="float-right">
                    <Page v-if="updatetotalCount" style="margin: 10px 0;text-align: center;" :current.sync="updatecurrent" :total="updatetotalCount" :page-size="updatepageSize" show-elevator show-total show-sizer  @on-change="updatepageChange" @on-page-size-change="updateSizeChange"></Page>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitEmp" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="deleteEmpModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="deteleEmp" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>

import {
    getFenceList,
    getFenceRemove,
    getFenceEmpList,
    getFenceEmpAdd,
    getFenceEmpDel,
    getEmpUnGrantList,
    getIndexMapEmpPoly
} from "@/api/api.js";
import {GroupCreate} from "@/mixins/group.js"
import {initColors} from "@/mixins/colorObj";
export default {
    mixins:[GroupCreate,initColors],
    data() {
        return {
            src: require("./../../assets/images/common/noPeo.png"),
            previewList:[],//图片预览
            pageSize:10,
            pageNum:1,
            keyword: "",
            list: [],
            removeId: "",
            deleteModal: false,
            name: "",
            type: "",
            polygon: "",
            center: "",
            radius: "",
            machs: null,
            detailsOBJ: {},
            overlays: [],
            btnList: [],
            deptId: "",
            lng: "",
            lat: "",
            deptName: "",
            flag: false,
            fenceMap: "",
            cover: "",
            id: "",
            emppageNum: 1,
            emppageSize: 10,
            totalCount: "",
            current: 1,
            empList: [],
            empKeyword: "",
            empIndex: "",
            empRows: "",
            upadtepageNum: 1,
            updatepageSize: 10,
            updatetotalCount: "",
            updatecurrent: 1,
            updateList: [],
            updateKeyword: "",
            updateEmpModal: false,
            msgList: [],
            fenceId: "",
            deleteEmpModal: false,
            empId: "",
            province:"",
            citySelect :"",
            districtSelect :"",
            areaSelect :"",
            opts : {
                subdistrict: 1,   //返回下一级行政区
                showbiz:false  //最后一级返回街道信息
            },
            district:"",
            citycode:"",
            polygons: [],
            groupId:"",
            groupEmpId:"",
            tableHeight:window.innerHeight - 355,
            showId:-1,
            workId:"",
            changeMap:true,
            fenceIdActive:"",
            fenceList:[],
            fenceEmpFlag: false,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.lng = val.lng||114.29484;
                this.lat = val.lat||30.592335;
                this.pageNum = 1;
                this.current = 1;
                this.empKeyword = "";
                this.keyword = "";
                this.groupId ="";
                this.workId ="";
                this.empList = [];
                this.getAllList();
                this.fenceId=''
                this.getGRPList(this.deptId);
                this.getIndexMapEmpPolyFn();
                this.changeMap=true
            }
        }
    },
    methods: {
        over(item,index){
            this.showId = index;
        },
        leave(item,index){
            this.showId = -1;
        },
        setPreview(src) {//图片预览
            this.previewList = [];
            this.previewList.push(src);
        },
        //获取电子围栏列表
        getAllList() {
            let params = {
                keyword: this.keyword,
                deptId: this.deptId
            };
            getFenceList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        // if(this.list.length > 0 ) {
                        //     this.fenceId = this.list[0].id;
                        //     this.getEmpList(this.fenceId);
                        // }

                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        searchAll() {
            this.getAllList();
        },
        remove(index, item) {
            this.removeId = item.id;
            this.deleteModal = true;
        },
        detele() {
            getFenceRemove(this.removeId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getAllList();
                        this.deleteModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateRow(type, index, item) {
            console.log('updateRow')
            localStorage.setItem("fenceFlag", 1);
            if (type == 0) {
                this.$router.push({ path: "/emp/upload/fence" });
                this.$store.commit('setFence', {});
            } else if (type == 1) {
                this.$router.push({
                    path: "/fence",
                    query: { fenceId: item.id }
                });
                this.$store.commit('setFence', item);
            }
        },
        getDetails(item){
            this.changeMap=false
            this.fenceId = item.id;
            this.getEmpList(this.fenceId);
        },
        cancel(type) {
            if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.updateEmpModal = false;
            } else if (type == 4) {
                this.deleteEmpModal = false;
            }
        },
        getEmpList(id) {
            let params = {
                fenceId: id,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keyword: this.empKeyword,
                groupId:this.groupId,
                workTypeId:this.workId,
            };
            getFenceEmpList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.empList = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        onSearch(){
            this.current = 1;
            this.emppageNum = 1;
            this.getEmpList(this.fenceId);
        },
        getGroupType(item){
            this.current = 1;
            this.emppageNum = 1;
            this.groupId = item
            this.getEmpList(this.fenceId);
        },
        getWorkType(item){
            this.current = 1;
            this.emppageNum = 1;
            this.workId = item
            this.getEmpList(this.fenceId);
        },
        pageChange(index) {
            this.pageNum = index;
            this.getEmpList(this.fenceId);
        },
        pageSizeChange(index){
            this.pageSize = index;
            this.getEmpList(this.fenceId);
        },
        //获取人员列表
        getAllEmpList() {
            let params = {
                pageSize: this.updatepageSize,
                pageNum: this.upadtepageNum,
                keyword: this.updateKeyword,
                fenceId:this.fenceId,
                deptId: this.deptId,
                groupId:this.groupEmpId,
            };
            getEmpUnGrantList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.updateList = res.data.list;
                        this.updatetotalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateEmp() {
            this.updateEmpModal = true;
            this.getAllEmpList();
        },
        onUpdateSearch(){
            this.updatecurrent = 1;
            this.eupdatepageNum = 1;
            this.getAllEmpList();
        },
        getUpdateGroupType(item){
            this.groupEmpId = item;
            this.updatecurrent = 1;
            this.eupdatepageNum = 1;
            this.getAllEmpList();
        },
        updatepageChange(index) {
            this.upadtepageNum = index;
            this.getAllEmpList();
        },
        updateSizeChange(index){
            this.updatepageSize = index;
            this.getAllEmpList();
        },
        emplistSelectOne(selection, row) {
            this.msgList = selection;
        },
        //全选
        emplistSelectALL(selection) {
            this.msgList = selection;
        },
        submitEmp() {
            let arr = [];
            this.msgList.forEach(i => {
                arr.push(i.empId);
            });
            if (arr.length == 0) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择要添加的对象"
                });
                return;
            }
            let params = {
                empList: arr,
                fenceId: this.fenceId
            };
            getFenceEmpAdd(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.updateEmpModal = false;
                        this.getEmpList(this.fenceId);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        removeRow(index, rows) {
            this.deleteEmpModal = true;
            this.empId = rows[index].empId;
        },
        deteleEmp() {
            let params = {
                empId: this.empId,
                fenceId: this.fenceId
            };
            getFenceEmpDel(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getEmpList(this.fenceId);
                        this.deleteEmpModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 地图位置
        getIndexMapEmpPolyFn(){
            let params = {
                deptId:this.deptId,
                groupId:this.groupId,
                empName: this.workCode,
                fenceId: this.fenceId,
            }
            getIndexMapEmpPoly(params).then(res=>{
                if(res.code == 200) {
                    let list = [];
                    this.fenceList =res.data.list;
                    res.data.list.forEach(v => {
                        v.idList = [];
                        v.empList.forEach(item => {
                            item.fenceId = v.id;
                            v.idList.push(item.empId)
                            list.push(item)
                        })
                    })
                    this.getAreaMap()
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //围栏地图
        getAreaMap() {
            let _that = this;
            let list = this.fenceList;
            let lng,lat,polygon,circle;
            let zoom = 14;
            var zoomIndex = 1;
            let num = 0;
            window.zoomIndex = zoomIndex;
            _that.mapObj = new AMap.Map("container", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                expandZoomRange:true,
                zoom: 10, //初始化地图层级
                // zooms:[3,20], //设置缩放级别范围 3-20 级
                center: [_that.lng, _that.lat], //初始化地图中心点
                mapStyle: this.isBoard || false ? 'amap://styles/grey' : '',
            });
            this.mapObj.clearMap();
            if(this.isProject){
                this.getProjectWorkArea(_that.mapObj);
            }
            function mapZoom(){
                zoom = _that.mapObj.getZoom(); //获取当前地图级别
                _that.zoomIndex = zoom / 10 ;
            }
            _that.mapObj.on('zoomchange', mapZoom);
            let cluster,markers = [];
            list.forEach((v , i ) => {
                if (v.type == 1) {
                    //计算多边形中心点的坐标;
                    let polygonPointList = v.polygonPointList;
                    let a = [];
                    let b = [];
                    let path = [];
                    for (let i in polygonPointList) {
                        a.push(polygonPointList[i].lat);
                        b.push(polygonPointList[i].lng);
                        //多边形的坐标点
                        let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                        path.push(x);
                    }
                    // 排序
                    let aSort =  a.sort((v,i)=>{ return v-i});
                    let bSort =  b.sort((v,i)=>{ return v-i});
                    lat = v.centerPoint.lat;
                    lng = v.centerPoint.lng;
                    polygon = new AMap.Polygon({
                        path: path,
                        strokeColor: this.colorList[i],
                        strokeWeight: 6,
                        strokeOpacity: v.idList.includes(_that.fenceIdActive) ?  0.5 : 0.2,
                        fillOpacity:    v.idList.includes(_that.fenceIdActive) ?  0.8 : 0.4,
                        fillColor: this.colorList[i],
                        zIndex: 50
                    });
                } else if (v.type == 2) {
                    lat = v.centerPoint.lat;
                    lng = v.centerPoint.lng;
                    let radius = v.radius;
                    circle = new AMap.Circle({
                        center: [lng, lat],
                        radius: radius, //半径
                        borderWeight: 3,
                        strokeColor: this.colorList[i],
                        strokeWeight: 6,
                        strokeOpacity:  v.idList.includes(_that.fenceIdActive) ?  0.5 : 0.2,
                        fillOpacity:    v.idList.includes(_that.fenceIdActive) ?  0.8 : 0.4,
                        strokeStyle: "dashed",
                        strokeDasharray: [10, 10],
                        fillColor: this.colorList[i],
                        zIndex: 50
                    });
                }
                if(_that.fenceEmpFlag){
                    let imageSize = 36;
                    v.empList.forEach((item , index)=> {
                        let marker = new AMap.Marker({
                            map: _that.mapObj,
                            icon: new AMap.Icon({
                                image: item.iconUrl,
                                size: new AMap.Size(36, 36), //图标大小
                                imageSize: new AMap.Size(imageSize, imageSize)
                            }),
                            id: item.empId,
                            empIndex:index,
                            position: [item.lng, item.lat],
                            offset: new AMap.Pixel(-13, -30)
                        });
                        markers.push(marker);
                        if(item.localeState == 1 && item.attendState == 1){
                            marker.setLabel({
                                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                                content: "<div class='in_fo1 in_fo105'>" + item.groupName+' - ' + item.empName + "</div>", //设置文本标注内容
                                direction: "top" //设置文本标注方位
                            });
                        }
                        //不在场
                        else if(item.localeState == 0  && item.attendState == 1){
                            marker.setLabel({
                                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                                content: "<div class='in_fo1 in_fo105'>" + item.groupName +' - ' + item.empName + "</div>", //设置文本标注内容
                                direction: "top" //设置文本标注方位
                            });
                        }
                        //缺勤
                        else if(!item.attendState){
                            marker.setLabel({
                                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                                content: "<div class='in_fo1 in_fo105'>" + item.groupName +' - ' + item.empName + "</div>", //设置文本标注内容
                                direction: "top" //设置文本标注方位
                            });
                            //出勤
                        }
                        AMap.event.addListener(marker, "click", function(e) {
                            _that.fenceEmpFlag = true;
                            let empIndex = e.target.Ce?e.target.Ce.empIndex:e.target.De.empIndex
                            _that.getEmpDetails(empIndex,v.empList)
                        });
                    })
                }else{
                    let marker = new AMap.Marker({
                        map: _that.mapObj,
                        position: [lng,lat],
                        // icon: new AMap.Icon({
                        //     size: new AMap.Size(32, 32),  //图标大小
                        //     image: require('../../assets/images/emp/index/emp_index_fence.png')
                        // })
                        icon: new AMap.Icon({
                            size: new AMap.Size(0, 0), // 图标大小设为0，不显示
                            image: '' // 透明1x1像素图片
                        }),
                    });
                    markers.push(marker);
                    marker.setLabel({
                        offset: new AMap.Pixel(10, 32), //设置文本标注偏移量
                        /* content: `
                        <div class="in_fo3 mapIcon ${ v.idList.includes(_that.fenceIdActive) ? 'mapBoxShadow_G' :'mapBoxShadow_R'}" style='background: ${ v.idList.includes(_that.fenceIdActive) ? '#28C81E;' :'#1891FF;'}color:#fff;border-radius: 50%;'>
                            <p style='font-size:16px;color: #FFFFFF;'>${v.empList.length > 999 ? '999+' : v.empList.length }</p>
                        </div>
                        `, //设置文本标注内容 */
                        content: `
                        <div onclick="toProject(${v.id})">
                            <p style='font-size: 12px; color: #000;'>${v.name}</p>
                        </div>
                        `, //设置文本标注内容
                        direction: "top" //设置文本标注方位
                    });
                    // window.toProject = function(id) {
                    //     _that.toProject(id)
                    // };
                    v.idList.forEach(v => {
                        if(v == _that.fenceIdActive){
                            num += 1;
                        }
                    })
                    for (let i in markers) {
                        if (v.idList.includes(_that.fenceIdActive)) {
                            if(num > 1){
                                let lnglat =  markers[i];
                                var clickHandler = function(e) {
                                    _that.mapObj.setZoomAndCenter(
                                        10,
                                        lnglat.getPosition()
                                    );
                                };
                                //
                                _that.mapObj.on("click", clickHandler);
                                _that.mapObj.on("complete", function(e) {
                                    // 模拟触发地图click事件
                                    _that.mapObj.emit("click", {
                                        lnglat: _that.mapObj.Ce?_that.mapObjCe.overlays[i]:_that.mapObj.De.overlays[i]
                                    });
                                });
                            }else{
                                let lnglat =  markers[i];
                                var clickHandler = function(e) {
                                    _that.mapObj.setZoomAndCenter(
                                        13,
                                        lnglat.getPosition()
                                    );
                                };
                                //
                                _that.mapObj.on("click", clickHandler);
                                _that.mapObj.on("complete", function(e) {
                                    // 模拟触发地图click事件
                                    _that.mapObj.emit("click", {
                                        lnglat: _that.mapObj.Ce?_that.mapObj.Ce.overlays[i]:_that.mapObj.De.overlays[i]
                                    });
                                });
                            }

                        }
                    }
                }
                if (v.type == 1) {
                    _that.mapObj.add(polygon);
                    // 缩放地图到合适的视野级别
                    // _that.mapObj.setFitView([polygon]);
                } else if (v.type == 2) {
                    circle.setMap(_that.mapObj);
                    // 缩放地图到合适的视野级别
                    // _that.mapObj.setFitView([circle]);
                }
                _that.mapObj.setFitView();
            })
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.lng = this.$store.state.porjectObject.lng||114.29484;
        this.lat = this.$store.state.porjectObject.lat||30.592335;
        this.getAllList();
        this.getGRPList(this.deptId);
        this.getworkTypeList(this.deptId,true)
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getIndexMapEmpPolyFn();
    }
};
</script>
<style lang="less" scoped>
// @import "./../../assets/style/emp.less";
@import "./../../assets/style/themeBase.less";

.empFence {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: #f5f5f5;
    .left{
        width: 250px;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        scrollbar-width: none;
        .ipt{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #BFBFBF;
        }
        ul{
            width: 230px;
            margin:0 auto;
            // margin-top: 20px;
            height: calc(100% - 150px);
            overflow-y: scroll;
            list-style: none;
            overflow-y: scroll;
            li{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                cursor: pointer;
                background: #f9f9f9;
                margin-bottom: 5px;
                span{
                    width: 180px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    margin-left: 10px;
                }
                div{
                    width: 50px;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    i{
                        cursor: pointer;
                        margin-right: 10px;
                    }
                }
            }
            .active{
                background:var(--themeColor);
                color: #fff;
                .direction{
                    background: rgba(255, 255, 255, .4);
                }
            }
        }
        .tree{
            width: 250px;
            margin:0 auto;
            margin-top: 20px;
            height: calc(100% - 100px);
            overflow-y: scroll;
        }
        .tree::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        .tree {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        .tree {
            -ms-overflow-style: none;
        }
        ul::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        ul {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        ul {
            -ms-overflow-style: none;
        }
    }
    .right {
            flex: 1;
            margin-left: 10px;
            overflow: hidden;
            .top{
                width: 100%;
                height: 72px;
                padding: 0 20px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .search {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .btnList{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        height: 32px;
                        background: #fff;
                        border-radius: 3px ;
                        border: 1px solid #C0BFBE;
                        margin-right: 20px;
                        .item{
                            width: 70px;
                            height: 32px;
                            line-height: 32px;
                            text-align: center;
                            color: #646566;
                            border-right: 1px solid var(--themeColor);
                            cursor: pointer;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            &.active{
                                color: #fff;
                                background-color: var(--themeColor);
                            }
                            &:last-of-type{
                                border-right: none;
                            }
                        }
                    }
                    .list {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-right: 20px;
                        span {
                            margin-right: 6px;
                        }
                    }
                }
                .rightBox{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .rightItem{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .span{
                            width: 80px;
                        }
                    }
                }
            }
            .bottom{
                width: 100%;
                height: calc(100% - 82px);
                margin-top: 10px;
                padding: 20px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 10px;
                .down {
                    width: 98%;
                    margin: 20px auto;
                    display: flex;
                    justify-content: flex-start;
                }
            }

    }
}
</style>
